<template>
<!-- 付款单 -->
<section class="content-box">
  <!--BOM列表-->
  <div v-if="isshowList">
    <el-col :span="24" class="toolbar">
      <el-form class="title">
        <h2>付款单</h2>
        <el-form-item class="cover">
          <div class="list-img" @click="handlePay">
            <img class="common-icon" src="../../../../static/content/images/Common/common-new.png" alt="" />
            <span>新建</span>
          </div>
          <div class="list-img" @click="search">
            <img class="common-icon" src="../../../../static/content/images/Common/common-query.png" alt="" />
            <span>查询</span>
          </div>
          <div class="list-img">
            <img class="common-icon" src="../../../../static/content/images/Common/common-print.png" alt="" />
            <span>打印</span>
          </div>
          <div class="list-img">
            <img class="common-icon" src="../../../../static/content/images/Common/common-export.png" alt="" />
            <span>导出</span>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table v-if="dataList" 
    :data="dataList" 
    ref="multipleTable"
    @row-dblclick="handlePay" 
    tooltip-effect="dark" 
    @selection-change="handleSelectionList" 
    highlight-current-row 
    v-loading="loading" 
    border 
    element-loading-text="正在加载中" 
    style="width: 100%">
        <el-table-column label="序号" type="index" width="80" sortable>
        </el-table-column>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column 
        prop="A" 
        label="日期" 
        width="150">
        </el-table-column>
        <el-table-column 
        prop="B" 
        label="编号" 
        width="120"
        show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
        prop="C" 
        label="名称" 
        width="120">
        </el-table-column>
        <el-table-column 
        prop="D" 
        label="付款金额" 
        width="120">
        </el-table-column>
        <el-table-column 
        prop="E" 
        label="凭证编号">
        </el-table-column>
        <el-table-column 
        prop="F" 
        label="经办人" 
        width="120">
        </el-table-column>
        <el-table-column 
        prop="G" 
        label="供应商" 
        width="120">
        </el-table-column>
        <el-table-column 
        prop="H" 
        label="备注" 
        width="120"
        show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
        prop="I" 
        label="状态" 
        width="120">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
                <div class="list-img" @click="repeal(scope.$index, scope.row)">
                  <img class="common-icon" src="../../../../static/content/images/Common/common-repeal.png" alt=""/>
                </div>
                <div class="list-img" @click="checkflowRow(scope.$index, scope.row)">
                  <img class="common-icon" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
                </div>
                <div class="list-img" @click="handleDel(scope.$index, scope.row)">
                  <img class="common-icon" src="../../../../static/content/images/Common/common-list-dele.png" alt=""/>
                </div>
            </template>
          </el-table-column>
    </el-table>
    <!--查询-->
    <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
          <el-form :model="Searchform">
            <el-form-item label="日    期 ：" :label-width="formLabelWidth">
              <el-date-picker type="date" v-model="Searchform.A" style="width:120px;" placeholder="选择日期"></el-date-picker>
              至&nbsp;<el-date-picker type="date" v-model="Searchform.B" style="width:120px;" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="付款金额 ：" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.C" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.D" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="编    号 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.E" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="名    称 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.F" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="凭证编号 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.G" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="经办人 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.H" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="供应商 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.I" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="状    态 ：" :label-width="formLabelWidth">
              <el-select v-model="Searchform.J" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer cover">
            <el-button size="small" @click="Reset">重 置</el-button>
            <el-button size="small" @click="Query">确 定</el-button>
          </div>
    </el-dialog>
  </div>
  <div v-if="isshowPay">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">付款单</span>
            <small>
              <span>状态：</span>
              <el-tag type="success">生成</el-tag>
            </small>
          </div>
           <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
                <div class="list-img" @click="checkflowRow">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
                  <span class="font">查看流程</span>
                </div>
                <div class="list-img" @click="addSave">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
                  <span class="font">保存</span>
                </div>
                <div class="list-img" @click="addSubmit">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
                  <span class="font">提交</span>
                </div>
            </span>
          </div>
        </div>
        <main class="main">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号:</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div v-if="Names">
              <h3>名称:</h3>
              <el-select v-model="name1" placeholder="请选择">
                <el-option
                  v-for="item in Names"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <h3>日期：</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="150px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="供    应    商：">
                      <el-input v-model="name1" placeholder="请输入供应商" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                   <el-col :span="12">
                    <el-form-item label="采 购 订 单：">
                      <el-input v-model="name1" placeholder="" icon="search" style="width:200px;" :on-icon-click="PurchaseOrderQuery"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="采    购    员：">
                      <el-input v-model="name1" placeholder="请输入采购员" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="付款项目：">
                      <el-select v-model="name1" placeholder="请选择供应商" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="付款金额(含税)：">
                      <el-input v-model="name1" placeholder="请输入付款金额(含税)" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="right-form">
              <el-form label-width="100px">
                <el-form-item label="备 注：">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="name1">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover">
          <h3>订单明细</h3>  
          <table class="InHideTable" border="1">
            <tr>
              <th style="width:40px;">序号</th>
              <th style="width:100px;">存货编码</th>
              <th style="width:100px;">存货名称</th>
              <th style="width:100px;">库存数量</th>
              <th style="width:100px;">本次采购数量</th>
              <th style="width:100px;">参考单价</th>
              <th style="width:120px;">不含税单价</th>
              <th style="width:100px;">含税单价</th>
              <th style="width:100px;">不含税金额</th>
              <th style="width:120px;">价税总额</th>
            </tr>
            <tr v-for="(item,index) in OrderDetail" :key="index">
              <td>
                <span>{{index+1}}</span>
              </td>
              <td>
                {{item.A}}
              </td>
              <td>
                {{item.B}}
              </td>
              <td>
                {{item.C}}
              </td>
              <td>
                <el-input type="text" class="full-box" v-model="item.D" @keyup.enter.native="nextinput($event)"></el-input>
              </td>
              <td>
                {{item.E}}
              </td>
              <td>
                {{item.F}}
              </td>
              <td>
                {{item.G}}
              </td>
              <td>
                <el-input type="text" class="full-box" v-model="item.H" @keyup.enter.native="nextinput($event)"></el-input>
              </td>
              <td>
                <el-input type="text" class="full-box" v-model="item.I" @keyup.enter.native="nextinput($event)"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3">合计：</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>{{NotaxAmount}}</td>
              <td>{{taxTotal}}</td>
            </tr>
          </table>
        </div>
        <!-- 销售订单弹窗 -->
        <el-dialog title="采购订单" :visible.sync="PurchaOrderDialog" :modal-append-to-body="false">
          <el-input
            placeholder="请输入采购订单号"
            style="width:200px;margin-bottom:10px;"
            icon="search"
            v-model="name1"
            :on-icon-click="handleIconClick">
          </el-input>
          <el-table 
            border
            tooltip-effect="dark"
            :data="PurchaOrderList"
            >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column property="A" label="日期" width="140"></el-table-column>
            <el-table-column property="B" label="编号" show-overflow-tooltip></el-table-column>
            <el-table-column property="C" label="名称" show-overflow-tooltip></el-table-column>
            <el-table-column property="D" label="订单金额" width="100"></el-table-column>
            <el-table-column property="E" label="入仓进度" width="100"></el-table-column>
            <el-table-column property="F" label="结算方式"></el-table-column>
            <el-table-column property="G" label="供应商" width="100" show-overflow-tooltip></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer cover">
            <el-button size="small" @click="Determine">确 定</el-button>
            <el-button size="small" @click="SaleOrderDialog = false">取 消</el-button>
          </div>
        </el-dialog>
        <!--流程图-->
        <el-dialog title="流程执行情况" :visible.sync="checkflowRowVisible" :modal-append-to-body="false" align="center">
          <el-table :data="docRowView" min-height="300" header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
            <el-table-column property="PlanUser" label="操作人"></el-table-column>
            <el-table-column property="StepName" label="步骤名称"></el-table-column>
            <el-table-column property="OpDate" label="时间"></el-table-column>
            <el-table-column property="OpRemark" label="备注"></el-table-column>
          </el-table>
        </el-dialog>
  </div>
</section>
</template>
<script>
export default {
  name: "PaymentOrders",
  data() {
    return {
      loading: false,
      isshowList: true,
      formLabelWidth: '120px',
      docViewloading: false, //流程图
      dialogSearchVisible: false,
      isshowPay: false,
      checkflowRowVisible:false,
      DocNo:'',
      name1:'',
      DocDate:'',
      PurchaOrderDialog:false,//采购订单查询窗口
      PurchaOrderList:[{
        A:'2018-01-30',
        B:'FG18010005',
        C:'非BOM采购',
        D:120,
        E:'0%',
        F:'发票结算',
        G:'广州市品冠电子有限公司'
      },{
        A:'2018-01-30',
        B:'FG18010005',
        C:'非BOM采购',
        D:120,
        E:'0%',
        F:'发票结算',
        G:'广州市品冠电子有限公司'
      },{
        A:'2018-01-30',
        B:'FG18010005',
        C:'非BOM采购',
        D:120,
        E:'0%',
        F:'发票结算',
        G:'广州市品冠电子有限公司'
      }],
      Names:[{
        label:'1',
        value:"1"
      },{
        label:'1',
        value:"2"
      }],
      options: [{
        value: '1',
        label: '黄金糕'
      }, {
        value: '2',
        label: '双皮奶'
      }],
      docRowView:[{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      }],
      OrderDetail:[{
        A:"YF0015",
        B:"直流电机",
        C:0,
        D:4,
        E:34.25,
        F:34.25,
        G:34.25,
        H:137.00,
        I:137.00
      },{
        A:"YF0015",
        B:"直流电机",
        C:0,
        D:4,
        E:34.25,
        F:34.25,
        G:34.25,
        H:137.00,
        I:137.00
      },{
        A:"YF0015",
        B:"直流电机",
        C:0,
        D:4,
        E:34.25,
        F:34.25,
        G:34.25,
        H:137.00,
        I:137.00
      }],
      Searchform: {
        A: '',
        B: '',
        C: '',
        D: '',
        E: '',
        F: '',
        G: '',
        H: '',
        I: '',
        J: '',
      },
      dataList: [{
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 120.00,
        E: 'PZ1803006',
        F: 200333,
        G: '彭雅',
        H: '广州市品冠电子有限公司',
        I: '12345',
        J: '待审核'
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 120.00,
        E: 'PZ1803006',
        F: 200333,
        G: '彭雅',
        H: '广州市品冠电子有限公司',
        I: '12345',
        J: '待审核'
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 120.00,
        E: 'PZ1803006',
        F: 200333,
        G: '彭雅',
        H: '广州市品冠电子有限公司',
        I: '12345',
        J: '待审核'
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 120.00,
        E: 'PZ1803006',
        F: 200333,
        G: '彭雅',
        H: '广州市品冠电子有限公司',
        I: '12345',
        J: '待审核'
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 120.00,
        E: 'PZ1803006',
        F: 200333,
        G: '彭雅',
        H: '广州市品冠电子有限公司',
        I: '12345',
        J: '待审核'
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 120.00,
        E: 'PZ1803006',
        F: 200333,
        G: '彭雅',
        H: '广州市品冠电子有限公司',
        I: '12345',
        J: '待审核'
      }],
    }
  },
  methods: {
    search() {
      this.dialogSearchVisible = true;
    },
    async Query() {
      this.dialogSearchVisible = false;
    },
    handlePay(index,row){
      console.log(index,'index');
      console.log(row,'row');
      this.isshowPay = true;
      this.isshowList = false;
      if(this.isUndefined(row)){
        alert('新建页面');
      }else{
        alert('编辑页面');
      }
    },
    //保存
    addSave(){},
    //提交
    addSubmit(){},
    Reset() {
      this.Searchform = {
        A: '',
        B: '',
        C: '',
        D: '',
        E: '',
        F: '',
        G: '',
        H: '',
        I: '',
        J: '',
      }
    },
    handlePay() {
      this.isshowList = false,
      this.isshowPay = true
    },
    PurchaseOrderQuery(){
      this.PurchaOrderDialog = true;
    },
    logTimeChange(val){
      //let ips = document.getElementsByTagName("input");
      //ips[this.inputIndex+1].focus();
    },
    ToBack(){
      this.isshowList = true,
      this.isshowPay = false
    },
    //流程图
    checkflowRow(){
      this.checkflowRowVisible = true;
    },
    //多选
    handleSelectionList(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach((item, index) => {
        console.log(item.date, 'item');
        arr.push(item.date)
      })
      const arrjoin = arr.join();
      console.log(arrjoin);
    },
  },
  computed:{
    //不含税金额=》合计
    NotaxAmount(){
      let sum = 0;
      this.OrderDetail.forEach(item=>{
        sum+=Number(item.H);
      })
      return sum;
    },
    //价税总额=》合计
    taxTotal(){
      let sum = 0;
      this.OrderDetail.forEach(item=>{
        sum+=Number(item.I);
      })
      return sum;
    },
  },
}
</script>
<style scoped lang="scss">
@import "../../../common/css/index.css";
.toolbar h2 {
  line-height: 36px;
  margin: 0 10px 0 0;
}

.toolbar .title {
  display: inline-flex;
  line-height: 5px;
  width: 100%;
  justify-content: space-between;
}

.main-left {
  padding: 1vw 1vw;
}

.main-left h3 {
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}

.left-form,
.right-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table .cell {
  padding: 0 0;
}

.common-icon {
  line-height: 24px;
  float: none
}
</style>